import { Popconfirm } from "antd";
import { LogoutOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";

import "./NavBar.scss";

function NavBar({ userId = null }) {
	return (
		<nav className="NavBar-container" data-testid="NavBar">
			<Link className="NavBar-title NavBar-link u-inlineBlock" to="/">
				Vidoc
			</Link>
			<Link
				className="NavBar-link u-inlineBlock"
				to={`/profile/${userId}`}
				state={{ userId: userId }}
			>
				Profile
			</Link>
			<Link className="NavBar-link u-inlineBlock" to="/notes">
				Notes
			</Link>
			{userId ? (
				<div className="user-info">
					<div className="logo" />
					<span className="user-name">丁真</span>
					<span className="user-logout">
						<Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
							<LogoutOutlined /> 退出
						</Popconfirm>
					</span>
				</div>
			) : (
				<Link className="NavBar-link u-inlineBlock NavBar-login" to="/login">
					Login
				</Link>
			)}
		</nav>
	);
}

export default NavBar;
